<template>
	<div class="GoodsSort">
		<div class="fenList">
			<h2 class="mainHeader">全部商品分类</h2>
			<ul class="activeList">
				<li><a href="###">服装城</a></li>
				<li><a href="###">美妆馆</a></li>
				<li><a href="###">尚品汇超市</a></li>
				<li><a href="###">全球购</a></li>
				<li><a href="###">闪购</a></li>
				<li><a href="###">团购</a></li>
				<li><a href="###">有趣</a></li>
				<li><a href="###">秒杀</a></li>
			</ul>
		</div>
		<div class="sortList">
			<ul>
				<li>
					<a href="">图书、音像、数字商品</a>
					<div
						style="width=200px;height:200px;backgroundColor:pink;display:none"
					></div>
				</li>
				<li>
					<a href="">手机</a>
					<div
						style="width=200px;height:200px;backgroundColor:red;display:none"
					></div>
				</li>
				<li>
					<a href="">加用电器</a>
					<div
						style="width=200px;height:200px;backgroundColor:black;display:none"
					></div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
export default {
	name: "typeNaveMyself",
};
</script>

<script lang="ts" setup></script>

<style lang="less">
.mainHeader {
	width: 210px;
	height: 45px;
	background-color: #e1251b;
	line-height: 45px;
	text-align: center;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
}
.GoodsSort {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.fenList {
	width: 1200px;
	margin-bottom: 2px solid #e1251b;
	display: flex;
	align-items: center;
}
.activeList {
	width: 100%;
	display: flex;
	height: 45px;
	margin: 0 22px;
	line-height: 45px;
	font-size: 16px;
	color: #333;
	li {
		margin-right: 45px;
	}
}
.sortList {
	width: 1200px;
	li:hover {
		div {
			display: block!important;;
		}
	}
}
</style>
